<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>course</title>

    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>


    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>

<div class="container" style="margin: 20px auto;" id="courseTermApp">

    <button type="button" class="btn btn-link" @click="fnUp">上一页</button>
    <button type="button" class="btn btn-link" @click="fnDown">下一页</button>
    <div class="card" v-for="(item, index) in dataList" :key="index" style="margin-top: 20px;">
        <img class="card-img-top" src="./blue.jpg" style="height: 50px;">
        <div class="card-body">
            <h4 class="card-title">{{item.sname}}</h4>
            <table class="table table-responsive-sm">
                <tbody class="w-100">

                <tr class="row mx-0">
                    <td class="col-3" >所属课程</td>
                    <td class="col-9" >{{item.course.sname}} - {{item.course.scode}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >上课时间</td>
                    <td class="col-9" >{{item.courseTime}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >起始日期</td>
                    <td class="col-9" >{{item.startDate}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >次数</td>
                    <td class="col-9" >{{item.totals}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >老师</td>
                    <td class="col-9" >{{item.teachNames}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >教室</td>
                    <td class="col-9" >{{item.room}}</td>
                </tr>
                <tr class="row mx-0">
                    <td class="col-3" >费用</td>
                    <td class="col-9" >{{item.fee}}</td>
                </tr>


                <tr class="row mx-0">
                    <td class="col-3">操作</td>
                    <td class="col-9">

                        <!-- <button type="button"  class="btn btn-link" @click="fnShowCourseTermModal(item)">添加学生</button> -->
                        <button type="button"  class="btn btn-link" @click="fnShowStudyModal(item)">查看学生</button>

                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>



    <!-- 模态框 -->

<div class="modal fade" id="studyModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">操作</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body">

            <table class="table table-responsive-sm" v-for="(item, index) in studyList" :key="index">
                <tbody class="w-100">

                    <tr class="row mx-0">
                        <td class="col-3">学员</td>
                        <td class="col-9">{{item.enrollment.childName}}</td>
                    </tr>
                    
                    <tr class="row mx-0">
                        <td class="col-3">是否交费</td>
                        <td class="col-9">{{item.payFlag}}</td>
                    </tr>


                    <tr class="row mx-0">
                        <td class="col-3">操作</td>
                        <td class="col-9">
                            <button type="button" class="btn btn-link" @click="fnSelect(item)">选择</button>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" @click="fnSaveTerm">确定</button>
        </div>

      </div>
    </div>
  </div>





</div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#courseTermApp',
        data: {


            pageNum: 0,
            courseTermForm: {

                course: {
                    sid: "",
                }

            },


            dataList: [ ],
            studyList: [],




        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {





            //上一页
            fnUp() {
                this.pageNum--;
                if (this.pageNum < 0) {
                    this.pageNum = 0;
                }
                this.queryCourseTerm();
            },

            //下一页
            fnDown() {

                this.pageNum++;
                if (this.pageNum > 100) {
                    this.pageNum = 100;
                }

                this.queryCourseTerm();
            },


            // 查看报名学生
            fnShowStudyModal(item){
                this.queryStudy(item);
                $('#studyModal').modal('show');

            },


        

            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },




            //修改 item
            fnSave() {


                var _self = this;

                var postUrl = '/courses';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.courseTermForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {


                        console.log(response);
                         if (response.code == 0) {

                           $('#courseModal').modal('hide');
                           _self.courseTermForm = { };
                           _self.queryCourseTerm();
                         }

                    }
                });
            },


            fnSaveTerm() {


                var _self = this;

                var postUrl = '/course-terms';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.courseTermForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {


                        console.log(response);
                         if (response.code == 0) {

                           $('#courseTermModal').modal('hide');
                           _self.courseTermForm = {
                               course: {
                                   sid: ''
                               }
                           };
                         }

                    }
                });
            },



            // 查询 cate
            queryCourseTerm() {

                var _self = this;

                var courseId = this.getQueryString("course-id");
                // this.courseTermForm.course.sid = this.getQueryString("course-id");


                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./course-terms?course.sid=" + courseId + "&sort=startDate,desc&page=" + this.pageNum,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);

                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },
            // 查询 study
            queryStudy(item) {

                var _self = this;
                var termId = item.sid;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./studies/find-by-term-id/" + termId,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);

                            _self.studyList = response.dat;
                        }

                    }
                });
            },





        },
        mounted() {

             this.queryCourseTerm();

        }
    })


</script>